<script setup lang="ts">
import { ref } from 'vue'
import { MdEditor } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import { PhPaperPlaneRight } from '@phosphor-icons/vue'

interface Props {
  submitting?: boolean
  placeholder?: string
}

const props = withDefaults(defineProps<Props>(), {
  submitting: false,
  placeholder: '写下你的想法... 支持 Markdown 语法，输入 @ 可以提醒其他用户',
})

const emit = defineEmits<{
  createComment: [content: string, mentionedUsers: string[]]
}>()

const newComment = ref('')
const mentionedUsers = ref<string[]>([])

const handleSubmit = () => {
  if (!newComment.value.trim()) return

  emit('createComment', newComment.value, mentionedUsers.value)
  newComment.value = ''
  mentionedUsers.value = []
}

const handleInput = (text: string) => {
  newComment.value = text
  // TODO: 处理@用户功能
}
</script>

<template>
  <div class="comment-form">
    <div class="bg-base-200/50 rounded-xl p-6 border border-base-300/50">
      <h3 class="text-lg font-semibold text-base-content mb-4">发表评论</h3>
      <div class="space-y-4">
        <div class="relative">
          <MdEditor
            v-model="newComment"
            :toolbars="[
              'bold',
              'underline',
              'italic',
              '-',
              'strikeThrough',
              'quote',
              'unorderedList',
              'orderedList',
              '-',
              'codeRow',
              'code',
              'link',
              'image',
              '-',
              'pageFullscreen',
            ]"
            :preview="false"
            :placeholder="placeholder"
            :disabled="submitting"
            @onChange="handleInput"
            language="zh-CN"
            :toolbarsExclude="['github']"
            :showCodeRowNumber="true"
            class="comment-editor"
          />
        </div>

        <div
          class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2 sm:gap-0"
        >
          <div class="text-sm text-base-content/60">支持 Markdown 语法 · 输入 @ 提醒用户</div>
          <button
            @click="handleSubmit"
            :disabled="!newComment.trim() || submitting"
            class="btn btn-primary btn-md gap-2 w-full sm:w-auto"
            :class="{ loading: submitting }"
          >
            <PhPaperPlaneRight v-if="!submitting" :size="16" />
            {{ submitting ? '发布中...' : '发布评论' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* md-editor 样式优化 */
:deep(.comment-editor) {
  border-radius: 0.5rem;
}

:deep(.comment-editor .md-editor) {
  min-height: 120px;
}

/* 移动端优化 */
@media (max-width: 768px) {
  :deep(.comment-editor .md-editor-toolbar) {
    padding: 0.5rem;
  }

  :deep(.comment-editor .md-editor-toolbar-item) {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  :deep(.comment-editor .md-editor) {
    font-size: 14px;
  }
}
</style>
